<template>
    <view style="height: 100vh;background: #fff;overflow: auto;" >
        <u-navbar class="borderUnset" title="推广人列表" :autoBack="true" back-icon-color="#000"
            title-color="#000" title-bold="true" title-size="32rpx">
        </u-navbar>
        <view class="dataBox">
            <view class="dataHead">
                <view>
                    <p>团队业绩 (积分)</p>
                    <p>{{ teamIntegral }}</p>
                </view>
                <view>
                    <p>个人业绩 (积分)</p>
                    <p>{{ green_integral }}</p>
                </view>
            </view>
            <view class="dataFoot">
                <view>
                    <p>团队人数</p>
                    <p>{{ teamCount }}人</p>
                </view>
                <view>
                    <p>团队等级</p>
                    <p>{{ teamLevel }}</p>
                </view>
                <view>
                    <p>今日直推加速</p>
                    <p>{{ toDay }}</p>
                </view>
                <view>
                    <p>今日团队加速</p>
                    <p>{{ toTeam }}</p>
                </view>
            </view>
        </view>
        <view class="tabs">
            <view @tap="tabsChange(item.value)" class="tab" :class="activeValue === item.value ? 'active' : ''"
                v-for="item in tabs" :key="item.value">{{ item.name }}</view>
        </view>

        <view style="padding: 0 30rpx;margin-top: 8rpx;">
            <u-search @change="$u.debounce(searchChange, 500)" placeholderColor="#ccc" bgColor="#F5F5F5" placeholder="搜索用户昵称"
                v-model="keyword" :showAction="false" />
            <view class="sort">
                <view :class="['sort-item']" @tap="handSortOptions('team')">
                    <text>团队排序</text>
                    <sort-icon size="23" class="m-l-10" :active-color="themeColor"
                        :status="sortType === 'team' ? sort : ''" />
                </view>
                <view :class="['sort-item']" @tap="handSortOptions('price')">
                    <text>金额排序</text>
                    <sort-icon size="23" class="m-l-10" :active-color="themeColor"
                        :status="sortType === 'price' ? sort : ''" />
                </view>
                <view :class="['sort-item']" @tap="handSortOptions('order')">
                    <text>订单排序</text>
                    <sort-icon size="23" class="m-l-10" :active-color="themeColor"
                        :status="sortType === 'order' ? sort : ''" />
                </view>
            </view>


            <view class="list">
                <u-loading v-show="loading" style="margin: 50rpx auto;" mode="circle"></u-loading>
                <view v-show="!loading" class="item" v-for="(item, index) in list" :key="index">
                    <view class="flex-row">
                        <u-avatar mode="square" :src="item.avatar"></u-avatar>
                        <view class="info">
                            <view class="flex-row">
                                <p class="name">{{ item.nickname }}</p>
                                <p class="phone">{{ item.mobile }}</p>
                            </view>
                            <view class="flex-row time">
                                <p>{{ item.create_time }}</p>
                            </view>
                        </view>
                    </view>
                    <view class="right">
                        <p class="money">￥{{ item.amount  }}</p>
                        <p class="order">{{ item.teamCount }}人，{{ item.orderCount }}单</p>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		apiMyTeam
	} from "@/api/user";
export default {
    data() {
        return {
            loading: false,
            activeValue: 'all',
            themeColor: 'red',
            keyword: '',
			teamIntegral:0,
			green_integral:0,
			teamCount:0,
			teamLevel:0,
			toDay:0,
			toTeam:0,
            tabs: [
                {
                    name: '全部粉丝',
                    value: 'all'
                },
                {
                    name: '一级粉丝',
                    value: 'one'
                },
                {
                    name: '二级粉丝',
                    value: 'two'
                },
            ],

            // 排序类型 desc asc
            sort: '',
            // 排序字段 team price order
            sortType: '',
            // 0：默认，1：降序，2：升序
            steps: 0,

            // 列表
            list: []
        }
    },
    onReady() {
        this.getList()
    },
    methods: {
        // 搜索
        searchChange(){
            this.getList()
        },

        // 切换标签
        tabsChange(value) {
            this.activeValue = value
            this.getList()
        },
        // 切换排序步骤
        changeSteps() {
            if (this.steps === 2) {
                this.steps = 0
            } else {
                this.steps++
            }
            this.changeSort()
        },
        // 切换排序
        changeSort() {
            if (this.steps === 0) {
                this.sort = ''
            } else if (this.steps === 1) {
                this.sort = 'desc'
            } else if (this.steps === 2) {
                this.sort = 'asc'
            }
        },

        // 切换排序
        handSortOptions(type) {
            if (type !== this.sortType && this.sortType) {
                this.steps = 0
            }
            this.sortType = type
            this.changeSteps()
            this.getList()
        },
		
        // 请求
        getList(){
            // 请求参数
            let params = {
                tabs: this.activeValue,
                keyword: this.keyword,
                sort: this.sort,
                sortType: this.sortType
            }
            // 加载动画
            this.loading = true
			apiMyTeam({
				level: this.activeValue,
				keyword: this.keyword,
			}).then(res => {
				this.list = res.team,
				this.teamIntegral = res.teamIntegral,
				this.green_integral = res.green_integral,
				this.teamCount = res.teamCount,
				this.teamLevel = res.teamLevel,
				this.toDay = res.toDay,
				this.toTeam = res.toTeam
				this.loading = false
			})
        }
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Microsoft YaHei-Regular;
}

.dataBox {
    background: #BF1A20;
    padding: 50rpx 40rpx;
    color: #fff;

}

.dataHead {
    display: flex;
    gap: 80rpx;

    p {
        &:nth-child(1) {
            font-size: 28rpx;
        }

        &:nth-child(2) {
            font-size: 56rpx;
            margin-top: 12rpx;
        }
    }
}

.dataFoot {
    margin-top: 35rpx;
    display: flex;
    gap: 50rpx;

    view {
        p {
            &:nth-child(1) {
                font-size: 24rpx;
            }

            &:nth-child(2) {
                font-size: 28rpx;
                margin-top: 10rpx;
            }
        }
    }
}

.tabs {
    display: flex;
    justify-content: space-around;
    gap: 20rpx;
    padding: 20rpx;

    .tab {
        padding: 15rpx 35rpx;
        border-radius: 100rpx;
        color: #666;
    }

    .active {
        background: #BF1A20;
        color: #fff;
    }
}

.sort {
    font-size: 26rpx;
    display: flex;
    align-items: center;
    height: 80rpx;
    background-color: #FFFFFF;

    &-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &-item--active {
        @include font_color()
    }

    &-style {
        position: relative;
        width: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            display: block;
            content: "";
            height: 1em;
            border-left: $-solid-border;
        }
    }
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

::v-deep .u-avatar{
    width: 100rpx !important;
    height: 100rpx !important;
}
::v-deep .u-avatar__img{
    width: 100rpx !important;
    height: 100rpx !important;
}

.list {
    display: flex;
    flex-direction: column;

    .item {
        padding: 25rpx 0;
        border-bottom: 1px solid #E5E5E5;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .info {
            margin-left: 10rpx;
            display: flex;
            flex-direction: column;
            gap: 15rpx;
            .name {
                font-size: 30rpx;
                font-weight: 400;
                width: 180rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .phone {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }

            .time{
                font-size: 26rpx;
                color: #999;
                p{
                    &:nth-child(2){
                        margin-left: 30rpx;
                    }
                }
            }
        }

        .right {
            float: right;
            display: flex;
            flex-direction: column;
            gap: 15rpx;
            .money {
                text-align: end;
                color: #BF1A20;
                font-size: 28rpx;
                font-weight: 400;
            }
            .order{
                font-size: 26rpx;
            }
        }

    }
}
</style>